<template>
  <div class="hello">
    	<mt-header fixed title="Vue中文社区">
    		<mt-button icon="more" slot="right"></mt-button>
    		
    	</mt-header>
    	
    	<div class="contain" >
    			<div class="nav">
    				<div class="navlist" @click="changeTab(i.key)" v-for="i in navlist">
    					{{i.title}}
    				</div>
    			</div>
    			<div class="list" v-if="list.length>0">
    				<div class="item" v-for="(item,index) in list">
         
          <img :src="item.author.avatar_url"  alt="user" />
          <!--同理实现点击进入帖子内容,以及判断显示置顶，精华等标签-->
          <router-link  :to="'/detail/'+item.id" tag="div" class="content">
            <div class="list-title">
              <span v-if="item.top">置顶</span>
              <span v-else-if="item.good">精华</span>
              <span v-else-if="item.tab === 'share'" >分享</span>
              <span v-else-if="item.tab === 'ask'" >问答</span>
              <span v-else-if="item.tab === 'job'">招聘</span>
              <strong>{{item.title}}</strong>
            </div>
            <!--评论数和访问量和时间-->
            <div class="timer">
              <span> 回复量{{item.reply_count}} 点击量 {{item.visit_count}}</span>
             
                <span>{{item.last_reply_at | formDate}}</span>
            </div>
          </router-link>
      
      </div>
    			</div>
    			<div class="list" v-if="list.length==0">		
    				暂无数据
    			</div>
    	</div>
    	<Backtop />
    	<Loading show="list.length==0||loadShow"/>
    	<Footers />
  </div>
</template>

<script>
	import Footers from "./com/footer.vue"
	import Loading from "./com/loading.vue"
		import Backtop from "./com/backtop.vue"
	import axios from "axios"
	import {getHome} from "../config/axios.js"
export default {
  name: 'HelloWorld',
  data () {
    return {
     loadShow:true,
     nav1:"all",
     list:[],
     navlist:[
     	{"title":"全部","key":"all"},{"title":"week","key":"week"},
     	{"title":"问答","key":"ask"},{"title":"分享","key":"share"},
     	{"title":"招聘","key":"job"}
     	],
     	page:1,
     	key:"all"
    }
  },
  
  created(){
  	
		this.getData(this.key);
		var that=this;
		window.addEventListener("scroll",function(e){
				var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
						var h=document.documentElement.scrollHeight;
						var client=document.documentElement.clientHeight;
			            console.log(h);    
			            if(h - client- scrollTop <=30 ) {
			            	if(that.loadShow==false){
			            		 that.page++;
			                that.getData(that.key)
			            	}
			               
			            }        
						
			})
		
		
  },
  methods:{
  	
  	
  	changeDate(time){
  		var d=new Date(time).toLocaleString();
  		return d;
  		
  	},
  	changeTab(key){
  		this.key=key;
  		this.page=1;
  		this.getData(key)
  	},
		getData(key){
			this.key=key
			console.log(key)
			this.loadShow=true
			getHome(key,this.page).then(res=>{
				console.log(res.data)
				this.loadShow=false;
				if(this.page==1){
					this.list=res.data.data
				}else{
					this.list=this.list.concat(res.data.data)
				}
				
		})
		}
		
  },

  components:{
  	Loading,
  	Footers,
  	Backtop
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contain{
	
	margin-top: 50px;
}
.nav{
	display: flex;
	width: 100vw;
}
.nav div{
	flex: 1;
}
.list{
	display: flex;
	width: 100%;
	flex-direction: column;
}
.list .item{
	display: flex;
	flex-direction: row;
	margin-top: 10px;
	border-bottom: 1px solid #ccc;
}
.list .item img{
	width: 40px;
	height: 40px;
}
.content{
	flex: 1;
	padding: 5px;
}

</style>
